<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>
    <title th:text="${title}"></title>
    <!--    jquery文件引入-->

    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>


    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/commit.css}">
    <link rel="stylesheet" th:href="@{/css/floatMessage.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">


    <!--   回显需要的-->
    <link rel="shortcut icon" th:href="@{https://pandao.github.io/editor.md/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/editormd.min.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.preview.css}">

    <!--  回显必须加的js-->
    <script th:src="@{/lib/marked.min.js}"></script>
    <script th:src="@{/lib/prettify.min.js}"></script>
    <script th:src="@{/lib/raphael.min.js}"></script>
    <script th:src="@{/lib/underscore.min.js}"></script>
    <script th:src="@{/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/lib/flowchart.min.js}"></script>
    <script th:src="@{/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/js/editormd.js}"></script>

    <style>
        @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");

        .card1 {
            max-width: 260px;
            height: 250px;
            /* margin: auto; */
            overflow-y: auto;
            position: relative;
            z-index: 1;
            overflow-x: hidden;
            background-color: rgba(255, 255, 255, 1);
            display: flex;
            transition: 0.3s;
            flex-direction: column;
            border-radius: 10px;
            box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
        }

        .card1[data-state="#about"] {
            height: 100%;

            .card-main {
                padding-top: 0;
            }
        }

        .card-header {
            position: relative;
            display: flex;
            height: 250px;
            flex-shrink: 0;
            width: 100%;
            transition: 0.3s;

            * {
                transition: 0.3s;
            }
        }

        .card-cover {
            width: 100%;
            height: 100%;
            position: absolute;
            height: 160px;
            top: -20%;
            left: 0;
            will-change: top;
            background-size: cover;
            background-position: center;
            filter: blur(30px);
            transform: scale(1.2);
            transition: 0.5s;
        }

        .card-avatar {
            width: 100px;
            height: 100px;
            box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            object-position: center;
            object-fit: cover;
            position: absolute;
            bottom: 0;
            left: 40%;
            transform: translateX(-60%) translateY(-80px);
        }

        .card-fullname {
            position: absolute;
            bottom: 0;
            font-size: 22px;
            font-weight: 700;
            text-align: center;
            white-space: nowrap;
            transform: translateY(-30px) translateX(-50%);
            left: 50%;
        }

        .card-jobtitle {
            position: absolute;
            bottom: 0;
            font-size: 11px;
            white-space: nowrap;
            font-weight: 500;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin: 0;
            left: 50%;
            transform: translateX(-100%) translateY(-7px);
        }

        .card-main {
            position: relative;
            flex: 1;
            display: flex;
            padding-top: 10px;
            flex-direction: column;
        }

        .card-social {
            display: flex;
            align-items: center;
            padding: 0 20px;
            margin-bottom: 30px;

            svg {
                fill: rgb(33, 46, 66);
                width: 16px;
                display: block;
                transition: 0.3s;
            }

            a {
                color: #70a4c5;
                height: 32px;
                width: 32px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: 0.3s;
                background-color: rgba(93, 133, 193, 0.05);
                border-radius: 50%;
                margin-right: 10px;

                &:hover {
                    svg {
                        fill: darken(rgb(9, 91, 224), 20%);
                    }
                }

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .card-buttons {
            display: flex;
            background-color: #fff;
            /*margin-top: auto;*/
            position: sticky;
            bottom: 0;
            left: 0;

            button {
                flex: 1 1 auto;
                user-select: none;
                background: 0;
                font-size: 13px;
                border: 0;
                padding: 15px 5px;
                cursor: pointer;
                color: #5c5c6d;
                transition: 0.3s;
                font-family: "Jost", sans-serif;
                font-weight: 500;
                outline: 0;
                border-bottom: 3px solid transparent;

                &.is-active,
                &:hover {
                    color: #2b2c48;
                    border-bottom: 3px solid #8a84ff;
                    background: linear-gradient(
                            to bottom,
                            rgba(127, 199, 231, 0) 0%,
                            rgba(207, 204, 255, 0.2) 44%,
                            rgba(211, 226, 255, 0.4) 100%
                    );
                }
            }
        }

        /*收藏功能的样式设计*/
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 600px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 11;
        }

        .modal-header {
            padding: 16px;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
        }

        .modal-body {
            padding: 16px;
        }

        .modal-footer {
            padding: 16px;
            text-align: right;
            border-top: 1px solid #ddd;
        }

        .btn {
            padding: 10px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-primary {
            background: #007bff;
            color: white;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn:hover {
            opacity: 0.9;
        }

        .collection-item {
            padding: 8px;
            margin: 4px 0;
            border: 1px solid #ddd;
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .collection-item:hover {
            background: #f9f9f9;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10;
        }
    </style>
</head>
<body style="background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);">
<div id="floating-window" class="floating-window hidden">
    <p>这是一个飘窗提示!</p>
</div>
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand ms-5" th:href="@{#}">博客</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav col-10">
                <li class="nav-item ">
                    <a class="nav-link active" aria-current="page" th:href="@{/blog/intoMain}">返回</a>
                </li>
            </ul>
            <div th:if="${session.username}">
                <form class="d-flex me-5 col-2" role="search">
                <span style="font-size: 20px; font-family:'微软雅黑,serif" class="me-2"
                      th:text="${username}"></span>
                    <img th:src="|@{/images/}${session.pic}|" alt="Logo" width="50" height="50"
                         style="border-radius: 50px" class="d-inline-block align-text-top">
                    <span style="font-size: 15px;"></span>
                </form>
            </div>
            <div th:if="session.username==null">
                <span style="font-size: 20px; font-family:'微软雅黑,serif" class="me-2">
                    未登录
                </span>
            </div>

        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-2 mt-5 ms-4 sticky-sidebar">
            <div class="card1" data-state="#about">
                <div class="card-header">
                    <div class="card-cover"
                         style="background-image: url('/images/a/home.png')"></div>
                    <img class="card-avatar" th:src="|@{/images/}${otherPath}|" alt="avatar"/>
                    <h1 class="card-fullname" th:text="${author}"></h1>
                    <h2 class="card-jobtitle" th:text="${motto}"></h2>
                </div>
                <div class="card-main">
                    <div class="card-section is-active" id="about">
                        <div class="card-social">
                            <a href="#">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"/>
                                </svg>
                            </a>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"/>
                                </svg>
                            </a>
                            <a href="#">
                                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0"/>
                                    <path d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0"/>
                                    <path d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0"/>
                                </svg>
                            </a>
                            <a href="#">
                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <div class="card-buttons">
                        <button data-section="#about" class="is-active" id="hisHome">他的主页</button>
                    </div>
                    <div class="card border-primary mb-3  mt-3" style="width: 200px;height: 150px;">
                        <!--                th:src="${pageContext.request.contextPath}/images/p1.jpg"-->
                        <img th:src="@{/images/p1.jpg}" alt="" class="img-fluid">
                        <a class="card-text small">最好去处</a>
                    </div>
                    <div class="card border-secondary mb-3  p-2" style="width: 200px;">
                        <ul class="list-group">
                            <li class="list-group-item"><a
                                    href="https://www.zhihu.com/question/659129048">网传银行开始拒收「断供房」了</a></li>
                            <li class="list-group-item">
                                <a href="https://s.weibo.com/weibo?q=%E4%B9%A0%E8%BF%91%E5%B9%B3%E8%87%B4%E4%BF%A1%E7%A5%9D%
                        E8%B4%BA%E9%BB%84%E5%9F%94%E5%86%9B%E6%A0%A1%E5%BB%BA%E6%A0%A1100%E5%91%A8%E5%B9%B4">
                                    习近平致信祝贺黄埔军校建校100周</a>
                            </li>
                            <li class="list-group-item"><a href="https://www.zhihu.com/question/659226049">
                                评价《崩坏：星穹铁道》流萤角色
                                PV 「壳中萤火」？</a></li>
                            <li class="list-group-item"><a href="https://www.zhihu.com/question/659212279">
                                凯尔特人 4-1 独行侠夺得
                                23-24 赛季 NBA 总冠军</a></li>
                            <li class="list-group-item"><a
                                    href="https://daily.zhihu.com/story/9773253">植物是如何从生物大灭绝时期幸存下来的？</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>


        </div>
        <div class="col-8 ms-1 mt-5 p-3" style="border: 1px solid; background-color: #f1f3f4">
            <div class="row">
                <div id="title">
                    <h3>
                        <span>题目</span>
                        <span id="sessionT" th:text="${title}"></span></h3>
                </div>
            </div>
            <br/>
            <h5 id="subtitle" style="margin: 0 auto;">
                <span>摘要:</span>
                <span th:text="${subtitle}"></span>
            </h5>
            <button class="btn btn-primary mt-2 mb-2" id="download-button">下载</button>

            <!-- 按钮 -->
            <button id="openModalBtn" class="btn btn-primary">收藏</button>
            <!-- 模态框 -->
            <div id="overlay" class="overlay"></div>
            <div id="modal" class="modal">
                <div class="modal-header">
                    收藏到
                </div>
                <div class="modal-body">
                    <div id="category-list">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="closeModalBtn" class="btn btn-secondary">取消</button>
                </div>
            </div>
            <p>
                <span>时间：</span>
                <span id="time" class="small" th:text="${time}">博客时间</span>
                <span>分类：</span>
                <span class="small" th:text="${cid}">分类</span>
                <span class="small" th:text="${mid}">分类</span>
            </p>
            <div id="test-editormd-view" style="margin: 0 auto">
                <textarea id="editormd-name" name="test-editormd-markdown-doc">
                </textarea>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{comment_section::commit-section-template}"></div>


<script th:src="@{/js/bootstrap.bundle.js}"></script>
<script>

    /**
     * 访问作者主页
     */
    $('#hisHome').click(function () {
        let phone = '[[${hisPhone}]]'
        window.location.href = "/content/intoOther?phone=" + phone;
    });

    /**
     消息弹窗
     */
    const $modal = $('#modal');
    const $overlay = $('#overlay');
    const $categoryList = $('#category-list')


    // 定义显示飘窗的函数
    function showFloatingWindow(message, duration = 3000) {
        const $floatingWindow = $('#floating-window');

        // 设置飘窗内容
        $floatingWindow.html(`<p>${message}</p>`);

        // 显示并设置动画
        $floatingWindow.stop(true, true).fadeIn(200).animate({bottom: '20px'}, 300);

        // 自动隐藏
        setTimeout(() => {
            $floatingWindow.animate({bottom: '-100px'}, 300, function () {
                $(this).fadeOut(200);
            });
        }, duration);
    }

    $(document).ready(function () {

        // 打开模态框
        //在此处进行一个查询收藏夹的工作
        $('#openModalBtn').on('click', function () {
            $.ajax({
                url: '/CategoryController/selectCategory',
                type: 'GET',
                success: function (response) {
                    console.log(response)
                    if (response.result === 1) {
                        const categories = response.categories
                        $categoryList.empty(); // 清空已有内容
                        for (let [key, value] of Object.entries(categories)) {
                            if (value.includes('[[${title}]]')) {
                                $categoryList.append(`
                            <div class="collection-item">
                            <p>${key}</p>
                            <button class="delete-article btn btn-block btn-outline-danger" type="button"
                                    data-text_title='[[${title}]]'
                                    data-category="${key}">
                                移除
                            </button>
                        </div>
                            `)
                            } else {
                                $categoryList.append(`
                            <div class="collection-item">
                            <p>${key}</p>
                                <button class="add-category-submit add-category btn btn-block btn-outline-primary"
                                    id="${key}" name="category"
                                    value="${key}">
                                收藏
                            </button>
                        </div>
                            `)
                            }
                        }
                        // 显示模态框
                        $overlay.fadeIn();
                        $modal.fadeIn();
                        showFloatingWindow(response.message, 5000)
                    } else {
                        showFloatingWindow(response.message, 5000)
                    }
                },
                error() {
                    alert("出错了，请重试...")
                }
            })

        });

        // 关闭模态框
        const closeModal = () => {
            $overlay.fadeOut();
            $modal.fadeOut();
        };

        $('#closeModalBtn').on('click', closeModal);

        $overlay.on('click', closeModal);


        /**
         * 返回
         */
        $('#return').click(function () {
            window.location.href = "/blog/intoMain";
        })
        /**
         * 尝试 通过传入参数到后端 记录id值
         */
        let m;
        //1.第一种显示文章的方式
        let testEditormdView;
        var title = document.getElementById("sessionT").innerText;
        $.get("showMarkdown", {title: '[[${title}]]'}, function (markdown) {
            m = markdown;
            testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                // 从数据库里得到数据
                markdown: markdown,
                htmlDecode: "style,script,iframe",
                tocm: true,
                width: "80%",
                tex: true,
                emoji: true,
                taskList: true,
                flowChart: true,
                sequenceDiagram: true
            });

        });

        // 绑定下载按钮的点击事件
        document.getElementById('download-button').addEventListener('click', function () {
            // var markdownContent = testEditormdView.getMarkdown(); // 获取 Markdown 内容
            var markdownContent = m; // 获取 Markdown 内容
            // 创建一个 Blob 对象，表示要下载的文件内容
            var blob = new Blob([markdownContent], {type: "text/plain;charset=utf-8"});

            // 创建一个隐藏的 a 标签
            var downloadLink = document.createElement("a");
            downloadLink.href = URL.createObjectURL(blob); // 创建指向该对象的URL
            downloadLink.download = "document.md"; // 设置下载的文件名

            // 触发点击事件
            document.body.appendChild(downloadLink); // 将 a 标签添加到 body 中
            downloadLink.click(); // 模拟点击
            document.body.removeChild(downloadLink); // 然后移除 a 标签
            // 释放 URL 对象
            URL.revokeObjectURL(downloadLink.href);

        });


        //评论区
        //提交评论
        $("#submit-commit").click(function () {
            $.ajax({
                url: "/CommitController/addCommit",
                type: "POST",
                data: {
                    commit: $("#input-commit").val(),
                },
                dataType: "json",
                success: function (data) {
                    alert(data.result);
                    location.reload();
                },
            })
        })

        //回复按钮，回复框弹出
        function showReplyBox(commentId) {
            $(".reply-box").css("display", "none"); // 使用 jQuery 的 .css() 方法来设置样式
            // 显示特定评论的回复框
            let replyBox = $("#reply-box-" + commentId);
            console.log(replyBox); // 这将打印出 jQuery 对象，不是原生的 DOM 元素
            replyBox.css("display", "block"); // 使用 jQuery 的 .css() 方法来显示特定的回复框
        }

        $(".reply-btn").click(
            function () {
                showReplyBox($(this).data("reply"))
            }
        )

        //发送按钮的申请
        function submitReply(commentId) {
            console.log("发送回复请求")
            console.log(commentId)
            console.log($("#reply-submit-" + commentId).data("committime"));
            console.log($("#textarea-" + commentId).val())
            $.ajax({
                url: "/CommitController/addRecover",
                data: {
                    commit_time: $("#reply-submit-" + commentId).data("committime"),
                    recover_content: $("#textarea-" + commentId).val(),
                },
                success: function (data) {
                    alert(data.result);
                    location.reload()
                },
                error: function () {
                    showFloatingWindow("出错了！")
                }
            })
            // 发送后，可以清空textarea并隐藏回复框
            $("#textarea-" + commentId).val(null);
            $("#reply-box-" + commentId).css("display", "none");
        }

        $(".reply-submit").click(
            function () {
                submitReply($(this).data("reply"))
            }
        );

        //删除评论
        $(".delete-commit").click(function () {
            $.ajax({
                url: "/CommitController/deleteCommit",
                data: {
                    commit_content: $(this).data("commitcontent"),
                    commit_time: $(this).data("committime"),
                },
                success: function (data) {
                    alert(data.result);
                    location.reload()
                },
                error: function () {
                    showFloatingWindow("出错了")
                }
            })
        })
        //删除回复
        $(".delete-recover").click(function () {
            $.ajax({
                url: "/CommitController/deleteRecover",
                data: {
                    commit_time: $(this).data("committime"),
                    recover_time: $(this).data("recovertime"),
                    recover_content: $(this).data("recovercontent"),
                },
                success: function (data) {
                    alert(data.result);
                    location.reload()
                }
            })
        })
        //工具悬停
        $('[data-bs-toggle="tooltip"]').tooltip();

    })
    // 动态加载按钮触发时间
    $(document).on('click', '.add-category-submit', function () {
        // showFloatingWindow("收藏操作！", 1000)
        $.ajax({
            url: "/CategoryController/addArticle",
            data: {
                text_title: '[[${title}]]',
                category: $(this).val(),
            },
            success: function (response) {
                // 关闭模态框
                const closeModal = () => {
                    $overlay.fadeOut();
                    $modal.fadeOut();
                };

                $('#closeModalBtn').on('click', closeModal);

                $overlay.on('click', closeModal);
                if (response.data === 1) {
                    showFloatingWindow(response.message, 5000)
                    // alert(response.result);
                    // location.reload();
                } else {
                    showFloatingWindow(response.message, 5000)
                }
                closeModal()
            },
            error: function () {
            }
        })
    })
    $(document).on('click', '.delete-article', function () {
        console.log($(this).data("category"));
        console.log($(this).data("text_title"));
        $.ajax({
            url: "/CategoryController/deleteArticle",
            data: {
                category: $(this).data("category"),
                text_title: $(this).data("text_title"),
            },
            success: function (response) {
                // 关闭模态框
                const closeModal = () => {
                    $overlay.fadeOut();
                    $modal.fadeOut();
                };
                $('#closeModalBtn').on('click', closeModal);
                $overlay.on('click', closeModal);
                showFloatingWindow(response.result)
                closeModal()

            }
        })
    })

    let commitStr = ["天青色等烟雨，而我在等你评论",
        "这里是评论区，不是无人区",
        "新的风暴已经出现，你的评论何时出现",
        "你渴望力量吗？评论让力量更强大！"];
    // 在页面加载时运行此函数
    window.onload = function () {
        // 使用Math.random()选择一个随机索引
        const randomIndex = Math.floor(Math.random() * commitStr.length);
        // 获取选中的字符串
        const randomString = commitStr[randomIndex];
        // 将选中的字符串显示在页面上
        document.getElementById('randomString').innerHTML = randomString;
    }


</script>
</body>

</html>

